<template>
  <div id="ViewMap" style="width: 100%;" />
</template>

<script>
import L from 'leaflet';
import { getAppLocation } from '@/utils/jssdkUtil';
import coordtransform from '@/utils/coordtransform';

export default {
  name: 'MaskMap',
  data() {
    return {
      map: null,
      zoom: 18
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    })
  },
  methods: {
    initMap() {
      const _t = this;
      var googlelayer = L.tileLayer(
        'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        {
          maxZoom: 18,
          updateWhenIdle: true,
          crossOrigin: true,
          reuseTiles: false,
          unloadInvisibleTiles: true
        }
      );
      var image = L.layerGroup([googlelayer]);
      const map = L.map('ViewMap', {
        minZoom: 3,
        maxZoom: 18,
        center: [30.273705, 119.978742],
        zoom: _t.zoom,
        layers: [image],
        zIndex: 6,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      map.on('locationfound', function(e) {
        var radius = e.accuracy / 2;
        L.circle(e.latlng, radius).addTo(map);
      });
      _t.map = map;
      // _t.getLngLatLocation();
      // _t.editMap();
    },
    setCenter() {
      var myIcon = L.icon({
        iconUrl: require('@/assets/fieldManage/dian.png'),
        iconSize: [30, 30]
      });
      var gcj02towgs84 = coordtransform.gcj02towgs84(119.978742, 30.273705);
      // wgs84坐标
      var xAxis_wgs84 = gcj02towgs84[0];
      var yAxis_wgs84 = gcj02towgs84[1];
      // 使用给定的动画选项设置地图视图（地理中心和缩放）。
      this.map.setView([yAxis_wgs84, xAxis_wgs84], this.zoom);
    },
    getLngLatLocation() {
      const _t = this;
      getAppLocation((data) => {
        if (data) {
          // var lnglat = gcj02towgs84(data.longitude, data.latitude);
          // _t.location(lnglat[0], lnglat[1])
          _t.location(data.longitude, data.latitude);
        }
      });
    },
    location(n, l) {
      const _t = this;
      // 点位icon
      if (_t.myIcon1) {
        _t.map.flyTo([l, n]);
        _t.map.setView([l, n], 18);
        return;
      }

      _t.myIcon1 = L.icon({
        iconUrl: require('@/assets/fieldManage/dizhi.png'),
        iconSize: [28, 35]
      });
      this.searchMarker1 = L.marker([l, n], {
        icon: _t.myIcon1
      });
      _t.searchMarker1.addTo(this.map);
      _t.map.setView([l, n], 18);
      _t.map.flyTo([l, n]);
    },
    /* addBoundy */
    addBoundy(editBoundaries) {
      const pLayer = L.polygon(editBoundaries, {
        fillOpacity: 0.5,
        fillColor: 'green'
      }).addTo(this.map);

      this.map.fitBounds(editBoundaries); // 图形在中心

      this.map.pm.enableGlobalEditMode({
        snappable: false,
        snapDistance: 100
      });
      pLayer.on('pm:snapdrag', (workingLayer) => {
        this.getAreaPerimeter(
          workingLayer.layer.getCenter().lng,
          workingLayer.layer.getCenter().lat,
          workingLayer.layer._latlngs
        );
      });
    }
  }
};
</script>

<style>
#mapContent {
  background-color: transparent !important;
}
</style>
